<div class="like">
  <div class="sheet-list" *ngIf="!creating else createSheet">
    <div class="header" (click)="creating = true">
      <i nz-icon nzType="folder-add" nzTheme="outline"></i>
      <span>新建歌单</span>
    </div>
    <nz-list [nzDataSource]="mySheets" [nzRenderItem]="itemTpl">
      <ng-template #itemTpl let-item>
        <nz-list-item class="list-item" (click)="onLike(item.id.toString())">
          <nz-list-item-meta
          [nzTitle]="nzTitle"
          [nzDescription]="item.trackCount"
          [nzAvatar]="item.coverImgUrl">
          <ng-template #nzTitle>
            <span>{{item.name}}</span>
          </ng-template>
          </nz-list-item-meta>
        </nz-list-item>
      </ng-template>
    </nz-list>
  </div>

  <ng-template #createSheet>
    <div class="create-sheet">
      <form nz-form [formGroup]="formModel" (ngSubmit)="onSubmit()">
        <nz-form-item>
          <nz-form-label nzSpan="5">歌单名：</nz-form-label>
          <nz-form-control nzHasFeedback nzSpan="12" nzErrorTip="请填写歌单名称">
            <input nz-input placeholder="歌单名" formControlName="sheetName" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <div class="btns">
            <button nz-button class="btn-back" (click)="creating = false">返回</button>
            <button nz-button nzType="primary" [disabled]="!formModel.valid">新建</button>
          </div>
        </nz-form-item>
      </form>
    </div>
  </ng-template>
  
  
</div>